<template>
	<view class="content">
		<u-form labelPosition="left" labelWidth="auto" style="font-size:'24rpx'">
			<view class="title">
				<text>基本信息</text>
			</view>
			<view class="form">
				<u-form-item label="单据编号" borderBottom>
					<u-input border="none" placeholder="请填写"></u-input>
					<u-image slot="right" src="/static/img/home/scan.png" width="12" height="12"></u-image>
				</u-form-item>
				<u-form-item label="备品名称" borderBottom>
					<u-input border="none" placeholder="请填写"></u-input>
				</u-form-item>
			</view>
			<view class="title">
				<text>产品信息</text>
			</view>
			<view>
				<!--start-->
				<view class="products">
					<view class="item">
						<view class="title">
							<view class="name">
								<text class="pro">工业级甘油</text>
								<text class="no">备品编号：JN2002300053</text>
							</view>
							<u-image src="/static/img/home/edit.png" width="12" height="12"></u-image>
						</view>
						<view class="info">
							<view class="gird">
								<view class="cate">
									<text>规格分类：B90</text>
									<text>库存数量：1</text>
								</view>
								<view class="warehouse">
									<text>所在仓库：B90</text>
									<text>所在库位：B90</text>
								</view>
							</view>
							<view class="thumb">
								<u-image src="/static/img/logo.png" height="88" width="88"></u-image>
							</view>
						</view>
					</view>
				</view>
				<!--end-->
				<u-form-item>
					<u-button text="添加产品" type="primary" :customStyle="{height:'88rpx'}" @click="handleGo"></u-button>
				</u-form-item>
			</view>
			<view class="title">
				<text>备注</text>
			</view>
			<view class="form">
				<u-form-item borderBottom>
					<u--textarea placeholder="请输入内容"></u--textarea>
				</u-form-item>
			</view>
			<view>
				<u-form-item>
					<u-button text="提交" :customStyle="{height:'88rpx'}" type="primary"></u-button>
				</u-form-item>
			</view>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	page {
		background-color: rgb(248, 248, 248);
		font-size: 24rpx;
		padding: 0rpx 32rpx 0 32rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.title {
		margin-top: 32rpx;
	}

	.form {
		background-color: #fff;
		padding: 0 32rpx 0 32rpx;
		border-radius: 10rpx;
		margin-top: 32rpx;
	}
	/**
	 * products
	 */
	.products {
		display: flex;
		flex-direction: column;
		margin-bottom: 32rpx;
	}
	
	.item {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 32rpx;
		margin-top: 32rpx;
	}
	
	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		border-bottom: 2rpx solid rgb(204, 204, 204);
	}
	.name{
		display: flex;
		flex-direction: column;
	}
	.pro{
		border-left: rgb(39, 115, 239) 10rpx solid;
		display: flex;
		align-items: center;
		padding-left: 8rpx;
		margin-bottom: 16rpx;
	}
	.no{
		padding-left: 18rpx;
	}
	.info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 32rpx;
		box-sizing: border-box;
	}
	.gird{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 2;
		height: 148rpx;
		
	}
	.cate{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.warehouse{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.thumb {
		margin-left: 16rpx;
		display: flex;
		flex: 1;
	}
</style>